<!DOCTYPE html>
<html lang="en">

<head>
  <title>规则校验结果展示</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
  <link rel="stylesheet" type="text/css" href="../js/handsontable/handsontable.full.min.css">
  <link rel="stylesheet" type="text/css" href="../js/handsontable/main.css">
  <script src="../js/handsontable/handsontable.full.min.js"></script>
  <script src="../js/handsontable/jquery.min.js"></script>
  <script src="../js/handsontable/xlsx.full.min.js"></script>
  <style type="text/css">
    .layui-badge-dot {
      width: 18px;
      height: 18px;

    }
  </style>
</head>

<body>
  <div id="content">
    <div style="padding: 20px; background-color: #F2F2F2;">
      <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header">校验结果列表</div>
            <div class="layui-card-body">
              <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
          </div>
        </div>
      </div>
    </div>



  </div>

  <div class="site-text" style="background-color: #F2F2F2;display: none" id="window" target="test123">
    <div class="layui-col-md12">
      <div data-jsfiddle="example1" class="ajax-container">
        <div class="controls" style="margin: 5px;">
          <button name="save" id="save" class="layui-btn layui-btn-xs">Save</button>
          <label>
            <input type="checkbox" name="autosave" id="autosave" checked="checked" autocomplete="off">Autosave</label>
          <input type="button" value="下载" onclick="down()" class="layui-btn layui-btn-xs" />


          <input type="file" value="选择模板" onchange="impt(this)" />
          <!--<input type="button" value="查看结果数据数据" onclick="showData()" />-->
        </div>
        <div id="example1" class="hot" style="width: 80%;height:100%;overflow: hidden"></div>
      </div>
      <div id="hot"></div>
    </div>
  </div>



  <!--js-->
  <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除</button>
    </div>
  </script>

  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="refresh">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="show">详情</a>
  </script>

  <script type="text/html" id="status">
    <span class="layui-badge-dot"></span>
  </script>
  <script src="../js/layui/layui.js" charset="utf-8"></script>

  <script>
    var reportModuleData = JSON.parse(window.localStorage.getItem("reportModuleData"));
    var reportData = JSON.parse(window.localStorage.getItem("reportData"));
    var resourceData;
    var currentReport;
    var errorMessage =  JSON.parse(window.localStorage.getItem("errorMessage"));
    var currentErrorMessage;
    layui.use('table', function () {
      var table = layui.table;
      table.render({
        elem: '#test',
        toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,
        defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
          title: '提示',
          layEvent: 'LAYTABLE_TIPS',
          icon: 'layui-icon-tips'
        }],
        title: '用户数据表',
        cols: [
          [{
            title: '操作',
            toolbar: '#barDemo',
            fixed: 'left',
            width: 150
          },
          {
            type: 'checkbox'
          }, {
            field: 'num',
            title: '序号',
            width: 80,
            sort: true,
            align: 'center'
          }, {
            field: 'statu',
            title: '报表核对',
            width: 100,
            templet: '#status',
            align: 'center'
          }, {
            field: 'reportId',
            title: '报表编号',
            width: '20%',
            sort: true
          }, {
            field: 'reportName',
            title: '报表名称',
            width: '20%',
            edit: 'text'
          }, {
            field: 'ip',
            title: '机构',
            width: '20%',
          }, {
            field: 'rule',
            title: '监管规则',
            width: '20%',
          }, {
            field: 'date',
            title: '业务日期',
            width: '20%',
          }

          ]
        ],
        data: reportModuleData
        //,page: true
      });
      //头工具栏事件
      table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
          case 'getCheckData':
            var data = checkStatus.data;
            layer.alert(JSON.stringify(data));
            break;
          case 'getCheckLength':
            var data = checkStatus.data;
            layer.msg('选中了：' + data.length + ' 个');
            break;
          case 'isAll':
            layer.msg(checkStatus.isAll ? '全选' : '未全选');
            break;
          //自定义头工具栏右侧图标 - 提示
          case 'LAYTABLE_TIPS':
            layer.alert('这是工具栏右侧自定义的一个图标按钮');
            break;
        };
      });
      //监听行工具事件
      table.on('tool(test)', function (obj) {
        // var index = layer.load(1, {
        //   shade: [0.5, '#000'] //0.1透明度的背景
        // });
        var data = obj.data;
        //console.log(obj)
        if (obj.event === 'refresh') {
          console.log("强制通过")
        } else if (obj.event === 'show') {
          //layer.close(index);
          var dataObject = reportData[data.reportId];
          currentReport = data.reportId;
          currentErrorMessage = errorMessage[currentReport];
          console.log("currentErrorMessage:"+JSON.stringify(currentErrorMessage));
          hot.loadData(dataObject);
          resourceData = dataObject;
          console.log("单元格数据:" + JSON.stringify(dataObject))


          layer.open({
            type: 1,
            title: "报表明细",
            area: ['90%', '80%'],
            btn: ['确定', '取消'],
            content: $("#window"),
            yes: function (index, layero) {

            }
          });

        }
      });
    });
  </script>
  <style>
    .layui-layer-title {
      padding: 0 80px 0 5px;
      height: 42px;
      line-height: 42px;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      color: #932150;
      overflow: hidden;
      background-color: #F8F8F8;
      border-radius: 2px 2px 0 0;
    }
  </style>
  <script src="../js/resultsDisplay.js"></script>

</body>

</html>